<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <input type="button" value="增加数值" @click="one++" /><br />
      当前数值: <span>{{ one }}</span>
    </div>
    <div>
      <p>第二题</p>
      <input type="text" v-model="two.uname" />
      <br />
      <input type="text" v-model="two.uage" />
    </div>
    <div>
      <p>第三题</p>
      <input type="text" value="价格" v-model="three.price" />
      <br />
      <input type="text" value="数量" v-model="three.stock" />
    </div>
    <div>
      <p>第四题</p>
      <input type="button" value="增加数值" @click="four++" /><br />
      当前数值: <span>{{ four }}</span>
    </div>
    <div>
      <p>第五题</p>
      <template v-for="(item, index) in five" :key="index">
        <input type="checkbox" :value="item" @click="item.ist = !item.ist" />
        <span :class="{ ist: item.ist }">{{ item.rw }}</span>
      </template>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

//第一题
let one = ref(0)
watch(one, (newV, oldV) => {
  console.log(`新值:${newV},旧值:${oldV}`)
})
//第二题
let two = reactive({
  uname: 'a',
  uage: 0,
})
watch(
  () => two.uname,
  (newV, oldV) => {
    console.log(`姓名从${oldV}变为${newV}`)
  },
)
watch(
  () => two.uage,
  (newV, oldV) => {
    console.log(`年龄从${oldV}变为${newV}`)
  },
)
//第三题
let three = reactive({
  price: 0,
  stock: 0,
})
watch(three, (newV, oldV) => {
  console.log('商品信息发生变化')
  console.log('新值:', newV)
  console.log('旧值:', oldV)
})
//第四题
let four = ref(0)
watch(
  four,
  (newV, oldV) => {
    console.log(`第四题  新值:${newV},旧值:${oldV}`)
  },
  { immediate: true },
)
//第五题
let five = reactive([
  { ist: false, rw: '任务1' },
  { ist: false, rw: '任务2' },
  { ist: false, rw: '任务3' },
])
watch(five, (newV, oldV) => {
  console.log('任务列表发生变化')
  console.log(`新值:`, newV)
  console.log(`旧值:`, oldV)
})
</script>
<style scoped>
.ist {
  color: darkgrey;
}
</style>
